<template>
    <view>
        <view class="itemBox">
            <view class="item">
                <view>总充值金额</view>
                <view>1232132.09元</view>
            </view>
            <view class="item">
                <view>消费次数</view>
                <view>974次</view>
            </view>
        </view>
        <view class="dateBox">
            <view>{{ start }}</view>
            <view>-</view>
            <view>{{ end }}</view>
        </view>
        <view class="items">
            <view class="title">订单类型:</view>
            <view class="value">
                <u-radio-group v-model="orderType" placement="row" size="30rpx" labelSize="20rpx">
                    <u-radio activeColor="#007aff" label="全部" name="全部"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="异常订单" name="异常订单"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="投诉订单" name="投诉订单"></u-radio>
                </u-radio-group>
            </view>
        </view>
        <view class="itemType">
            <text>选择机器:</text><u-icon :label="type" size="14" name="arrow-right" labelPos="left"></u-icon>
        </view>
        <view class="submit">查询</view>
        <view class="table">
            <zb-table :show-header="true" :columns="column" :stripe="true" :fit="false" @rowClick="rowClick"
                :data="data"></zb-table>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            start: '请选择开始日期',
            end: '请选择结束日期',
            orderType: '全部',
            type: '全部',
            column: [

                { name: 'name', label: '设备名称', emptyString: '--' },
                { name: 'age', label: '充值金额', emptyString: '--' },
                { name: 'sex', label: '是否出水', emptyString: '--' },
                { name: 'age', label: '充值', emptyString: '--' },
                { name: 'address', label: '消费模式' },
                { name: 'date', label: '订单id', sorter: true },
                { name: 'province', label: '充值时间' },

            ],
            data: [
                {
                    date: '2016-05-02',
                    name: '王小虎1',
                    province: '上海',
                    sex: '男',
                    age: '18',
                    img: "https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
                    city: '普陀区',
                    address: '上海市普',
                    zip: 200333
                },
                {
                    date: '2016-05-02',
                    name: '王小虎2',
                    province: '上海',
                    sex: '男',
                    age: '18',
                    city: '普陀区',
                    address: '上海市普',
                    zip: 200333
                },
                {
                    date: '2016-05-02',
                    name: '王小虎3',
                    province: '上海',
                    sex: '男',
                    age: '18',
                    city: '普陀区',
                    address: '上海市普',
                    zip: 200333
                },
                {
                    date: '2016-05-02',
                    name: '王小虎4',
                    province: '上海',
                    sex: '男',
                    age: '18',
                    city: '普陀区',
                    address: '上海市普',
                    zip: 200333
                },
                {
                    date: '2016-05-02',
                    name: '王小虎5',
                    province: '上海',
                    sex: '男',
                    age: '18',
                    city: '普陀区',
                    address: '上海市普',
                    zip: 200333
                }
            ]
        };
    },
    watch: {},
    methods: {},
    onShow() { },
    onLoad(option) {
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.itemBox {
    width: 94%;
    height: 150rpx;
    display: flex;
    margin: auto;
    margin-top: 30rpx;

    .item {
        width: 47%;
        height: 100%;
        background-color: $uni-color-primary;
        margin: auto;
        border-radius: 20rpx;
        text-align: center;

        view:nth-child(1) {
            font-size: 34rpx;
            color: #fff;
            font-weight: 600;
            margin-top: 24rpx;
        }

        view:nth-child(2) {
            font-size: 30rpx;
            color: #fff;
            font-weight: 600;
            margin-top: 10rpx;
        }
    }
}

.dateBox {
    display: flex;
    width: 94%;
    margin: auto;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;

    view:nth-child(1) {
        width: 45%;
        color: $uni-color-primary;
        // text-align: center;
    }

    view:nth-child(2) {
        width: 10%;
        text-align: center;
    }

    view:nth-child(3) {
        width: 45%;
        color: $uni-color-primary;
        // text-align: center;
        text-align: right;
    }
}

.items {
    display: flex;
    width: 94%;
    height: 80rpx;
    margin: auto;
    line-height: 80rpx;
    font-size: 28rpx;

    .title {
        width: 25%;
    }

    .value {
        margin-top: 20rpx;
    }
}

.itemType {
    display: flex;
    width: 94%;
    height: 80rpx;
    margin: auto;
    line-height: 80rpx;

    text {
        padding-right: 20rpx;
    }
}

.submit {
    width: 94%;
    height: 80rpx;
    background-color: $uni-color-primary ;
    margin: auto;
    border-radius: 50rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    margin-top: 30rpx;
}

.table {
    width: 94%;
    margin: auto;
    margin-top: 30rpx;
}
</style>